<template>
    <!--    如果对方5分钟不说话吗，一方解除，双方都会被惩罚， 如果不是5分钟内没说话，被别人恶意解除，则只有解除方被惩罚，举报并解除-->
    <!--   双方5小时不说话，则自动解除，没人被惩罚？-->
    <!--   每周匹配成功上线5次，1 5， 2 15 ，3 30 ，4 1 ，5 2-->
    <v-layout fill-height column class="white">
        <v-app-bar color="white" app flat>
            <v-toolbar-title>消息({{chats.length}})</v-toolbar-title>

            <v-spacer></v-spacer>

            <!--<v-btn icon>
                <v-icon>search</v-icon>
            </v-btn>-->
        </v-app-bar>
        <v-flex>
            <v-divider></v-divider>
            <v-card flat v-for="chat in chats" :key="chat.id">
                <v-card-text>
                    <div class="flex-row justify-space-between">
                        <div class="flex-row flex-auto" @click="toMessageVue(chat)">
                            <!--<template v-if="!chat.beRead">
                                <mu-badge circle color="red" class="messageUserImgBox" badge-class="userMessageBoxBadge">
                                    <img class="messageUserImg" :src="$imgUrl+chat.user.imgs[0].img"/>
                                </mu-badge>
                            </template>
                            <template v-else>-->
                            <img class="messageUserImg flex-none" :src="$imgUrl+chat.img"/>
                            <div class="flex-col justify-content-between flex-auto mg-left-15px">
                                <div class="subtitle-1 black--text">{{chat.nickname}}</div>
                                <div>
                                    <!-- 定义临时变量-->
                                    <span v-show="false">
                                        {{message = chat.messages.last()}}
                                    </span>
                                    {{message.content}}
                                </div>
                            </div>
                        </div>
                        <div class="grey--text">
                            {{message.createTime | formatMinutes}}
                            <v-menu>
                                <template v-slot:activator="{ on }">
                                    <v-btn icon v-on="on">
                                        <v-icon>more_vert</v-icon>
                                    </v-btn>
                                </template>
                                <v-list class="py-0">
                                    <v-list-item @click="removeChat(chat)">
                                        <v-list-item-title>解除</v-list-item-title>
                                    </v-list-item>
                                    <v-list-item>
                                        <v-list-item-title>关闭</v-list-item-title>
                                    </v-list-item>
                                </v-list>
                            </v-menu>
                        </div>
                    </div>
                </v-card-text>
                <v-divider></v-divider>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
  import {namespace} from "vuex-class"
  import User from "@/model/User"
  import Chat from "@/model/Chat"
  import message from "@/views/message/message.vue"
  import RouterName from "@/const/RouterName"

  const chatModule = namespace('chat')
  const userModule = namespace('user')

  @Component
  export default class ChatVue extends Vue {
    @userModule.State('user') user: User
    @chatModule.State('chats') chats: Chat []

    /*get chatsFilter(): Chat[] {
      return this.chats.filter(item => this.tempInt > 0 && (
        item.type !== this.$const.chatType.MATCH_UNLOCKED
        || item.type === this.$const.chatType.MATCH_UNLOCKED && new Date(item.createTime).getTime() + 1 * 60 * 1000 > new Date().getTime())
      )
    }*/

    created() {
    }

    toMessageVue(chat: Chat) {
      this.$routerTo(RouterName.message, {chatId: chat.id})
    }

    removeChat(chat: Chat) {
      this.$post('chat/removeChat', chat).then(res => {
        this.$store.dispatch('chat/getChats')
      })
    }

    getResidueDate(time: number): number {
      // @ts-ignore
      if (this.tempInt > 1) {
        return new Date(time).getTime() + 60 * 1000 - new Date().getTime()
      } else {
        return 0
      }
    }
  }
</script>
<style lang="scss" scoped>
    @import 'index.scss';
</style>

<style>
    .userMessageBoxBadge {
        width: 12px;
        height: 12px;
        top: -5px;
        right: -5px;
    }
</style>
